@import "mixins.scss";

// eg: mgl-20: margin-left: 20rpx;
@mixin margin($dis) {
	.mgt-#{$dis * 2} {
		margin-top: 2rpx * $dis !important;
	}
	.mgb-#{$dis * 2} {
		margin-bottom: 2rpx * $dis !important;
	}
	.mgl-#{$dis * 2} {
		margin-left: 2rpx * $dis !important;
	}
	.mgr-#{$dis * 2} {
		margin-right: 2rpx * $dis !important;
	}
	// 横向margin
	.mgx-#{$dis * 2} {
		margin-left: 2rpx * $dis !important;
		margin-right: 2rpx * $dis !important;
	}
	// 纵向margin
	.mgy-#{$dis * 2} {
		margin-top: 2rpx * $dis !important;
		margin-bottom: 2rpx * $dis !important;
	}
}

// eg: pdl-20: padding-left: 20rpx;
@mixin padding($dis) {
	.pdt-#{$dis * 2} {
		padding-top: 2rpx * $dis !important;
	}
	.pdb-#{$dis * 2} {
		padding-bottom: 2rpx * $dis !important;
	}
	.pdl-#{$dis * 2} {
		padding-left: 2rpx * $dis !important;
	}
	.pdr-#{$dis * 2} {
		padding-right: 2rpx * $dis !important;
	}
	// 横向padding
	.pdx-#{$dis * 2} {
		padding-left: 2rpx * $dis !important;
		padding-right: 2rpx * $dis !important;
	}
	// 纵向padding
	.pdy-#{$dis * 2} {
		padding-top: 2rpx * $dis !important;
		padding-bottom: 2rpx * $dis !important;
	}
}

@for $var from 1 through 30 {
	@include margin($var);
	@include padding($var);

	.ft-#{$var * 2} {
		font-size: 2rpx * $var !important;
	}
}

@for $var from 1 through 50 {
	.lh-#{$var * 2} {
		line-height: 2rpx * $var !important;
	}
}

.set-inline-block-top {
	display: inline-block !important;
	vertical-align: top;
	&.bottom {
		vertical-align: bottom;
	}
}

$position: left center right;
@each $var in $position {
	.text-#{$var} {
		text-align: $var !important;
	}
}

// 定位
$positionValues: relative absolute fixed;
@each $var in $positionValues {
	.position-#{$var} {
		position: $var !important;
	}
}

.split {
	position: relative;
	&:after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -12rpx;
		width: 1rpx;
		height: 24rpx;
		background-color: #e6e6e6;
	}
}

.subsection-container {
	width: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
}

page {
	width: 100%;
	height: 100%;
	background-color: $bgcolor;
	color: #333;
	/* #ifdef MP-ALIPAY || MP-DINGTALK*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* #endif */
}

.layout {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.clear-height {
	min-width: 0;
	min-height: 0;
}

.mainbnt-color {
	background-image: linear-gradient(#59c2ff, #2e8cf7);
}

/* flex 布局 begin */
.flex {
	display: flex !important;
}
$flexDirections: row column row-reverse column-reverse;
@each $var in $flexDirections {
	.flex-#{$var} {
		flex-direction: $var !important;
	}
}
$flexWrap: wrap nowrap;
@each $var in $flexWrap {
	.flex-#{$var} {
		flex-wrap: $var !important;
	}
}
.justify-start {
	justify-content: flex-start;
}
.justify-end {
	justify-content: flex-end;
}
.justify-between {
	justify-content: space-between;
}
.space-between {
	justify-content: space-between;
}
.justify-center {
	justify-content: center;
}
.align-center {
	align-items: center;
}

.item-start {
	align-items: flex-start;
}

.item-center {
	align-items: center;
}

.item-end {
	align-items: flex-end;
}

.align-stretch {
	align-items: stretch;
}
.align-start {
	align-items: flex-start;
}
.align-end {
	align-items: flex-end;
}
.content-start {
	align-content: flex-start;
}
.content-end {
	align-content: flex-end;
}
.content-center {
	align-content: center;
}
.content-between {
	align-content: space-between;
}
.content-around {
	align-content: space-around;
}
.content-stretch {
	align-content: stretch;
}
.flex-1 {
	flex: 1;
}
/* flex 布局 end */

.u-button {
	height: 70rpx !important;
	&.u-button--large {
		height: 90rpx !important;
		&.u-button--circle {
			border-top-left-radius: 90rpx !important;
			border-top-right-radius: 90rpx !important;
			border-bottom-left-radius: 90rpx !important;
			border-bottom-right-radius: 90rpx !important;
		}
	}
	&.u-button--primary {
		background: $btnPrimaryColor;
		border-width: 0 !important;
		&.u-button--plain {
			background: #fff;
			border-color: $maincolor;
			color: $maincolor;
			border-width: 1rpx !important;
		}
	}
	&.u-button--mini {
		height: 50rpx !important;
		text {
			font-size: 24rpx !important;
		}
	}
}

.bg-white {
	background-color: #fff;
}

.tip-title {
	position: relative;
	padding-left: 16rpx;
	font-size: 30rpx;
	font-weight: bold;
	&:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 6rpx;
		height: 32rpx;
		background-color: $maincolor;
		border-radius: 2rpx;
	}
}

// width 相关
.w-full {
	width: 100%;
}
.w-_30 {
	width: 30rpx;
}

// height 相关
.h-full {
	height: 100%;
}
.h-_30 {
	height: 30rpx;
}
.h-_92 {
	height: 92rpx;
}
.h-_160 {
	height: 160rpx;
}

// 定位相关
.fixed {
	position: fixed;
}

.left-0 {
	left: 0;
}

.right-0 {
	right: 0;
}

.bottom-0 {
	bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);
}

// margin 相关
.mt-2 {
	margin-top: 16rpx;
}
.mt-3 {
	margin-top: 24rpx;
}

.mt-4 {
	margin-top: 30rpx;
}

.mt-5 {
	margin-top: 40rpx;
}

.mt-6 {
	margin-top: 48rpx;
}

.ml-1 {
	margin-left: 8rpx;
}

.ml-2 {
	margin-left: 16rpx;
}

.my-2 {
	margin-top: 16rpx;
	margin-bottom: 16rpx;
}

// padding相关
.p-1 {
	padding: 4rpx;
}

.p-8 {
	padding: 32rpx;
}

.p-10 {
	padding: 40rpx;
}

.pl-8 {
	padding-left: 32rpx;
}

.pt-8 {
	padding-top: 32rpx;
}

.px-4 {
	padding-left: 16rpx;
	padding-right: 16rpx;
}

.px-8 {
	padding-left: 32rpx;
	padding-right: 32rpx;
}

.px-10 {
	padding-left: 40rpx;
	padding-right: 40rpx;
}

.py-1 {
	padding-top: 4rpx;
	padding-bottom: 4rpx;
}

.py-2 {
	padding-top: 8rpx;
	padding-bottom: 8rpx;
}

.py-4 {
	padding-top: 16rpx;
	padding-bottom: 16rpx;
}

.py-6 {
	padding-top: 24rpx;
	padding-bottom: 24rpx;
}

.py-8 {
	padding-top: 32rpx;
	padding-bottom: 32rpx;
}

.pb-8 {
	padding-bottom: 64rpx;
}

.pb-_92 {
	padding-bottom: 92rpx;
}

// 边框相关
.border {
	border-width: 1px;
}
.border-b {
	border-bottom-width: 2rpx;
}
.boder-solid {
	border-style: solid;
}
.border-b-solid {
	border-bottom-style: solid;
}

.border-b-gray {
	border-bottom-color: #e6e6e6;
}

.border-blue {
	border-color: #59c2ff;
}

// 背景相关
.bg-red {
	background-color:rgb(220, 28, 36);
}

.bg-blue {
	background-color: #59c2ff;
}

.bg-yellow-1 {
	background-color: rgb(182, 161, 136);
}

.bg-purple {
	background-color: rgb(127, 71, 221);
}

// 文字相关
.text-0 {
	font-size: 0;
}

.text-xs {
	font-size: 20rpx;
}

.text-sm {
	font-size: 24rpx;
}

.text-base {
	font-size: 28rpx;
}


.text-xl {
	font-size: 36rpx;
}


.text-center {
	text-align: center;
}

.text-black {
	color: rgb(51, 51, 51);
}

.text-white {
	color: #fff;
}

.text-red {
	color: rgb(220, 28, 36);
}

.text-gray {
	color: #aaa;
}

.text-gray-light {
	color:rgb(128, 128, 128);
}

.text-primary {
	color: #59c2ff;
}

.leading-8 {
	line-height: 1.8em;
}


// 盒子
.border-box {
	box-sizing: border-box;
}

// 公共样式
.page-with-safe-area {
	padding-bottom: env(safe-area-inset-bottom);
}